<template>
  <a-config-provider :theme="themeV" :locale="locale">
    <div :style="{ '--ant-primary-color': useAppStore().theme.primaryColor }">
      <a-watermark :content="config.layout.waterMark">
        <router-view />
      </a-watermark>
    </div>
  </a-config-provider>
</template>

<script lang="ts" setup>
import { useAppStore } from '@/store/app';
import { theme } from 'ant-design-vue';
import { config } from './settings/application';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { messages } from './locales';

dayjs.locale('zh-cn');
const locale = computed(() => {
  return useAppStore().language === 'zh_CN' ? messages.zh_CN : messages.en_US;
});
useI18n().locale.value = useAppStore().language;
const themeV = computed(() => {
  return {
    algorithm: app.layout.value.navTheme === 'real-dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
    token: {
      colorPrimary: useAppStore().theme.primaryColor,
      borderRadius: 2,
    },
  };
});

import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

const app = storeToRefs(useAppStore());

const colorWeak = computed(() => {
  return app.layout.value.colorWeak;
});
const gray = computed(() => {
  return app.layout.value.gray;
});
watch(
  colorWeak,
  newVal => {
    const body = document.body;
    if (newVal) {
      app.layout.value.gray = false;
      body.style.filter = 'invert(80%)';
    } else {
      body.style.removeProperty('filter');
    }
  },
  { immediate: true },
);
watch(
  gray,
  newVal => {
    const body = document.body;
    if (newVal) {
      app.layout.value.colorWeak = false;
      body.style.filter = 'grayscale(0.95)';
    } else {
      body.style.removeProperty('filter');
    }
  },
  { immediate: true },
);
</script>
